<template>
	<view>
		<view class="userbj" v-if="user.id != undefined">
			<view class="status_bar"></view>
		    <view class="userinfo" @click="get_link('user/set')">
		        <view class="img"><image :src="user.pic" mode="aspectFill"></image></view>
		        <view class="neirong">
		            <view class="name">{{user.nickname}}</view>
					<block v-if="user.iospay">
						<view class="vipitme" v-if="user.vip>0">到期时间：{{user.viptime}}</view>
						<view class="vipitme" v-else>开通VIP全站资源免费看</view>
					</block>
					<view class="vipitme" v-else>我的{{user.cion_name}}：<text>{{user.cion}}</text>个</view>
		        </view>
		    </view>
			<block v-if="user.iospay">
				<view class="jbbox">
				    <view class="balance">我的{{user.cion_name}}：<text>{{user.cion}}</text>个</view>
				    <view class="btn" @click="get_payshow()">充值{{user.cion_name}}</view>
				    <view class="btn b2" @click="cardshow=true">兑换</view>
				</view>
				<view class="vipbox">
				    <view class="lg"></view>
				    <view class="btn" @click="get_vipshow()">{{user.vip>0?'立即续期':'立即开通'}}</view>
				</view>
			</block>
		    <view class="list">
				<view v-if="user.iospay && !user.islnvitecode" class="li" @click="get_link('user/lnvitecode')">
					<view class="name">填写邀请码</view>
					<view class="more"><text class="iconfont icon-jinru"></text></view>
				</view>
		        <view v-if="user.iospay" class="li" @click="get_link('user/agent')">
		            <view class="name">代理分销</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_link('user/history')">
		            <view class="name">播放记录</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_link('user/collect')">
		            <view class="name">追剧记录</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_link('user/rechargerecord')">
		            <view class="name">充值记录</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_link('user/consume')">
		            <view class="name">消费记录</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_kefu()">
		            <view class="name">客服咨询</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		        <view class="li" @click="get_link('user/about')">
		            <view class="name">关于我们</view>
		            <view class="more"><text class="iconfont icon-jinru"></text></view>
		        </view>
		    </view>
		</view>
		<loading :load="true" v-else></loading>
		<view class="popupbox" v-if="vipshow">
		    <view class="viphybox">
		        <view class="title">VIP年费会员</view>
		        <view class="neirong">
		            <view class="name">类型：年费会员</view>
		            <view class="itme">期限：一年</view>
		            <view class="price">价格：<text>{{user.viprmb}}元</text></view>
		            <view class="text">开通年费会员，可享全站资源一年免费观看。</view>
		        </view>
		        <view class="btn" @click="get_pay_send('vip')">立即支付</view>
		        <view class="close" @click="get_hide()"><text class="iconfont icon-guanbi"></text></view>
		    </view>
		</view>
		<view class="popupbox" v-if="payshow">
		    <view class="coinbox">
		        <view class="title">{{user.cion_name}}充值</view>
		        <view class="list">
		            <view class="li" v-for="(item,index) in user.cionlist" :key="index" :class="{on:czIndex == index}" @click="get_pay_xuan(index)">
		                <view class="jine">{{item.rmb}} 元</view>
		                <view class="sub">{{item.cion}}{{user.cion_name}}<text v-if="item.giving > 0">+{{item.giving}}{{user.cion_name}}</text></view>
		                <view class="duosong" v-if="item.giving < 1">没有赠送</view>
		                <view class="duosong" v-else>多送{{item.giving}}{{user.cion_name}}</view>
		            </view>
		        </view>
		        <view class="tishi">
		            <view class="p">1、{{user.cion_name}}和会员属于虚拟商品，一经购买不可退换；</view>
		            <view class="p">2、未满18岁的未成年需要在监护人主导、同意下进行相关付款操作；</view>
		            <view class="p">3、充值{{user.cion_name}}一般5分钟内到账，如未到账请在“我的”页面联系客服处理；</view>
		        </view>
				<view class="btn" @click="get_pay_send('cion')">支付 {{user.cionlist[czIndex].rmb}} 元</view>
		        <view class="close" @click="get_hide()"><text class="iconfont icon-guanbi"></text></view>
		    </view>
		</view>
		<view class="popupbox" v-if="paytypeshow">
			<view class="paytype-box">
				<view class="tt">
					<text class="txt">选择付款方式</text>
					<view class="del" @click="get_pay_hide()">
						<image class="img" src="../../static/img/vod/close.png"></image>
					</view>
				</view>
				<view class="ul">
					<view v-if="user.isalipay" class="li" @click="get_type('alipay')"><text class="txt">支付宝</text><view class="dian" :class="{on: paytype=='alipay'}"></view></view>
					<view v-if="user.iswxpay" class="li" @click="get_type('wxpay')" style="border-top: 1px solid #f5f5f5;margin-bottom: 8px;"><text class="txt">微信支付</text><view class="dian" :class="{on: paytype=='wxpay'}"></view></view>
				</view>
				<view class="btn" @click="get_pay_btn()"><text class="txt">立即支付</text></view>
			</view>
		</view>
		<view class="popupbox" v-if="cardshow">
			<view class="card-box">
				<view class="tt">
					<text class="txt">兑换</text>
					<view class="del" @click="cardshow=false">
						<image class="img" src="../../static/img/vod/close.png"></image>
					</view>
				</view>
				<view class="input">
					<input type="text" v-model="card" placeholder="请输入兑换码"/>
				</view>
				<view class="btn" @click="get_card_btn()"><text class="txt">确定兑换</text></view>
			</view>
		</view>
	</view>
</template>
    
<script>
    let that = null;
    export default {
        data() {
            return {
                post: {},
                bottomIndex:2,
                vipshow: false,
                payshow: false,
                czIndex: 3,
                user: {},
				paytype: 'wxpay',
				type: 'cion',
				paytypeshow: false,
				iosapplet: false,
				card: '',
				cardshow: false
            }
        },
        onLoad() {
            that = this;
			uni.setNavigationBarTitle({title: '我的'});
			if(window != undefined && window.location.href.indexOf('?code=') > -1){
				let uarr = window.location.href.split('?code=');
				window.location.href = uarr[0];
			}
        },
		onShow() {
			that.get_data();
		},
		onPullDownRefresh() {
			that.get_data();
		},
        methods: {
			get_data(){
				that.http.get_curl('user/index',{},function(res){
					uni.stopPullDownRefresh(); //停止下拉样式
					if(res.code == 1){
						that.user = res.data;
						// #ifndef MP-WEIXIN
						that.user.iospay = true;
						if(!that.user.iswxpay) that.paytype = 'alipay';
						// #endif
					}
				});
			},
			get_login(){
				uni.navigateTo({
					url: '../user/login'
				});
			},
			get_link(url){
				if(!['user/history','user/about'].includes(url) && that.user.id == 0){
					that.get_login();
					return;
				}
				uni.navigateTo({
					url: '../'+url
				});
			},
            get_vipshow(){
				if(!that.user.iospay) return;
				if(that.user.id == 0){
					that.get_login();
					return;
				}
				that.vipshow = true
			},
            get_payshow(){
				if(that.user.id == 0){
					that.get_login();
					return;
				}
				that.payshow = true
			},
            get_hide(){
				that.paytypeshow = false;
				that.vipshow = false
                that.payshow = false
			},
			get_pay_xuan(index){
				that.czIndex = index;
			},
			get_kefu(){
				let sweixin = null;
				// #ifdef APP-PLUS
				if(that.user.kefu_url == '' || that.user.corp_id == ''){
					uni.showToast({
						title: '未配置客服地址',
						icon: 'none'
					});
					return;
				}
				plus.share.getServices(res=>{
					sweixin = res.find(i => i.id === 'weixin')
					if(sweixin){  
						sweixin.openCustomerServiceChat({  
							corpid: that.user.corp_id,
							url: that.user.kefu_url,
						},suc=>{  
							console.log("success",JSON.stringify(res))   
						},err=>{  
							console.log("error",JSON.stringify(err))  
						})  
					}else{  
						uni.showToast({
							title: '当前环境不支持微信操作!',
							icon: 'none'
						});
					}  
				});
				// #endif
				// #ifdef MP-WEIXIN
				if(that.user.kefu_url == '' || that.user.corp_id == ''){
					uni.showToast({
						title: '未配置客服地址',
						icon: 'none'
					});
					return;
				}
				uni.openCustomerServiceChat({
				    extInfo: {url: that.user.kefu_url},
				    corpId: that.user.corp_id,
				    fail(res){
				        console.log(res);
				    }
				});
				// #endif
				// #ifdef H5
				if(that.user.kefu_url == ''){
					uni.showToast({
						title: '未配置客服地址',
						icon: 'none'
					});
					return;
				}
				window.open(that.user.kefu_url);
				// #endif
			},
			get_pay_send(type){
				if(that.user.id == 0){
					uni.navigateTo({
						url: './user/login'
					});
					return;
				}
				let weixin = false;
				// #ifdef H5
				weixin = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
				// #endif
				// #ifdef MP-WEIXIN
				weixin = true;
				// #endif
				if(weixin){
					if(type == 'cion'){
						that.get_pay_btn();
					}else{
						that.get_vip_btn();
					}
				}else{
					that.type = type;
					that.paytypeshow = true;
				}
			},
			get_pay_btn(){
				if(that.user.id == 0){
					uni.navigateTo({
						url: './user/login'
					});
					return;
				}
				if(that.type == 'vip'){
					that.get_vip_btn();
					return;
				}
				uni.showLoading({title: '加载中'});
				that.http.get_curl('user/cionpay',{index:that.czIndex,type:that.paytype},function(res){
					uni.hideLoading()
					if(res.code == 1){
						that.http.get_pay(that.paytype,res.data,function(state){
							if(state == 'ok'){
								uni.showToast({title: '付款成功'});
								that.get_data();
							}
						});
					}else if(res.code == 3){
						//需要获取openid
						uni.showToast({title: '当前无法支付，请重新登录',icon:'none'});
						uni.removeStorageSync('user_token');
						that.get_data();
					}
				});
			},
			get_vip_btn(){
				if(that.user.id == 0){
					uni.navigateTo({
						url: './user/login'
					});
					return;
				}
				uni.showLoading({title: '加载中'});
				that.http.get_curl('user/vippay',{type:that.paytype},function(res){
					uni.hideLoading();
					if(res.code == 1){
						that.http.get_pay(that.paytype,res.data,function(state){
							if(state == 'ok'){
								uni.showToast({title: '付款成功'});
								that.get_data();
							}
						});
					}else if(res.code == 3){
						//需要获取openid
						uni.showToast({title: '当前无法支付，请重新登录',icon:'none'});
						uni.removeStorageSync('user_token');
						that.get_data();
					}
				});
			},
			get_type(pay){
				that.paytype = pay;
			},
			get_pay_hide(){
				that.paytypeshow = false;
			},
			get_card_btn(){
				if(!that.card) return;
				uni.showLoading({title: '加载中'});
				that.http.get_curl('user/cardsend',{card:that.card},function(res){
					uni.hideLoading();
					if(res.code == 1){
						uni.showToast({title: '兑换成功'});
						that.card = '';
						that.cardshow = false;
						that.get_data();
					}
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
    .userbj{width: 100%;height: 240px;
        .userinfo{width: calc(100% - 32px);margin: 0 auto;position: relative;
            .img{width: 60px;height: 60px;border-radius: 50%;border: 2px solid #fff;position: absolute;top: 50px;left: 0;overflow: hidden;
                image{width: 100%;height: 100%;}
            }
            .neirong{padding-top: 58px;padding-left: 70px;height: 60px;
                .name{font-size: 32rpx;color: #333;font-weight: bold;}
                .vipitme{font-size: 14px;color: #999;padding-top: 6px;}
            }
        }
        .jbbox{width: 100%;position: relative;margin-top: 5px;
            .balance{padding: 0 32rpx;height: 40px;font-size: 14px;color: #333;line-height: 40px;
                text{font-size: 18px;font-weight: bold;}
            }
            .btn{width: 160rpx;height: 60rpx;font-size: 28rpx;color: #fff;background: #f60;line-height: 60rpx;text-align: center;position: absolute;top: 50%;right: 140rpx;margin-top: -30rpx;border-radius: 60rpx;}
			.btn.b2{right: 32rpx;background: #3788E0;width: 100rpx;}
		}
        .vipbox{width: calc(100% - 32px);margin: 0 auto;position: relative;height: 50px;overflow: hidden;background: url(../../static/img/user/vip.png) no-repeat;background-size: cover;margin-top: 32rpx;border-radius: 8px;box-shadow: 0px 2px 32rpx 0px rgba(0,0,0,.04);
            .lg{position: absolute;left: -120%;top: 0;width: 100%;height: 100%;background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));transform: skewx(-25deg);-webkit-transform: skewx(-25deg);animation-name: gift;animation-iteration-count: infinite;animation-duration: 2s;animation-delay: 2s;}
            .btn{width: 80px;height: 30px;background: #fdd490;color: #8b5e29;font-size: 14px;line-height: 30px;text-align: center;position: absolute;top: 10px;right: 10px;border-radius: 30px;z-index: 9;}
        }
        .list{width: calc(100% - 32px);margin: 0 auto;background: #fff;border-radius: 8px;box-shadow: 0px 2px 32rpx 0px rgba(0,0,0,.04);margin-top: 32rpx;
            .li{width: 100%;height: 44px;border-bottom: 1px solid #ebebeb;line-height: 44px;position: relative;
                .name{font-size: 14px;color: #333;padding-left: 32rpx;
                    text{padding-right: 5px;font-size: 14px;}
                }
                .more{position: absolute;top: 0;color: #666;right: 32rpx;}
            }
            .li:last-child{border-bottom: 0 solid #ebebeb;}
        }
    }
    // 弹窗
    .popupbox{width: 100%;height: 100vh;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;z-index: 999;
        .viphybox{width: 100%;height: auto;background: #fff;position: absolute;bottom: 0;left: 0;border-radius: 10px 10px 0 0;
            .title{width: 100%;height: 44px;font-size: 32rpx;color: #333;font-weight: bold;text-align: center;line-height: 44px;}
            .neirong{width: calc(100% - 32px);margin: 0 auto;background: #f8f8f8;border-radius: 5px;line-height: 30px;font-size: 14px;color: #333;padding: 5px 0;
                .name{padding-left: 10px;}
                .itme{padding-left: 10px;}
                .price{padding-left: 10px;
                    text{color: #f00;font-weight: bold;}
                }
                .text{font-size: 12px;padding-left: 10px;color: #999;}
            }
            .btn{width: calc(100% - 32px);height: 40px;border-radius: 40px;line-height: 40px;text-align: center;color: #fff;background: linear-gradient(270deg, #fcae3a, #f15d25);margin: 15px auto;}
            .close{position: absolute;top: 0;right: 32rpx;color: #333;line-height: 44px;
                text{font-size: 20px;}
            }
        }
        .coinbox{width: 100%;height: auto;background: #fff;position: absolute;bottom: 0;left: 0;border-radius: 10px 10px 0 0;
            .title{width: 100%;height: 44px;font-size: 32rpx;color: #333;font-weight: bold;text-align: center;line-height: 44px;}
            .list{width: calc(100% - 32px);margin: 0 auto;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;
                .li{width: calc(50% - 20px);height: 80.77px;background: #fff;box-shadow: 0px 2px 32rpx 0px rgba(0,0,0,.07);border-radius: 5px;margin: 0 8px;margin-bottom: 15px;
                    .jine{padding: 0 5px;text-align: center;font-size: 14px;color: #333;font-weight: bold;padding-top: 10px;}
                    .sub{padding: 0 5px;font-size: 12px;color: #666;text-align: center;}
                    .duosong{padding: 0 5px;font-size: 12px;color: #f60;text-align: center;}

                }
                .li.on{border: 1px solid #f60;box-shadow: 0px 2px 32rpx 0px rgba(255,102,1,.2);}
            }
            .tishi{width: calc(100% - 32px);margin: 0 auto;background: #f8f8f8;padding: 10px 0;
                .p{font-size: 10px;color: #999;padding: 0 5px;}
            }
            .btn{width: calc(100% - 32px);height: 40px;border-radius: 40px;line-height: 40px;text-align: center;color: #fff;background: linear-gradient(270deg, #fcae3a, #f15d25);margin: 15px auto;}
            .close{position: absolute;top: 0;right: 32rpx;color: #333;line-height: 44px;
                text{font-size: 20px;}
            }
        }
		.paytype-box{
			background: #fff;position: absolute;bottom: 0;left: 0;padding-bottom: 50px;
			.tt{width: 750rpx;height: 55px;text-align: center;line-height: 55px;position: relative;}
			.tt .txt{font-size: 32rpx;color: #333;font-weight: bold;line-height: 55px;padding-left: 32rpx;}
			.del{position: absolute;top: 0px;right: 12px;color: #333;line-height: 55px;
			    .img{width: 20px;height: 20px;}
			}
			.ul{padding-left: 32rpx;
				.li{
					height: 60px;position: relative;
					.txt{font-size: 16px;line-height: 60px;}
					.dian{position: absolute;width: 20px;height: 20px;border-radius: 10px;border: 1px solid #ccc;right:10px;top:22px;}
					.dian.on{background: #f60;}
				}
			}
			.btn{width: 686rpx;margin-left: 32rpx;height: 40px;border-radius: 40px;line-height: 40px;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);margin-top: 10px;}
			.btn .txt{color: #fff;text-align: center;line-height: 40px;font-size:16px;}
		}
		.card-box{
			background: #fff;position: absolute;bottom: 0;left: 0;padding-bottom: 50px;
			.tt{width: 750rpx;height: 55px;text-align: center;line-height: 55px;position: relative;}
			.tt .txt{font-size: 32rpx;color: #333;font-weight: bold;line-height: 55px;padding-left: 32rpx;}
			.del{position: absolute;top: 20px;right: 12px;color: #333;line-height: 55px;
			    .img{width: 20px;height: 20px;}
			}
			.input{
				padding: 32rpx;
				input{width: calc(100% - 20rpx);border: 2rpx solid #cdcdcd;color:#666;font-size:28rpx;padding: 0 10rpx;height: 70rpx;line-height: 70rpx;border-radius: 8rpx;}
			}
			.btn{width: 686rpx;margin-left: 32rpx;height: 40px;border-radius: 40px;line-height: 40px;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);margin-top: 10px;}
			.btn .txt{color: #fff;text-align: center;line-height: 40px;font-size:16px;}
		}
    }
    @keyframes gift {
        0%{
            left: -120%;
        }
        100%{
            left: 100%;
        }
    }
</style>